<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <script src="./vue.js"></script>
</head>

<body>

    <div id="comment" > 
    <div class="center" >
       
        <input type="text" v-bind:value="discuss[0].value"><button id="show" type="button"
            @click="flag=!flag">{{flag?"发表评论":"发表评论"}}</button>
    </div>
    <div  v-show="flag" v-for=" s in discuss" :key="s.name"  id="comment"  align=" left" >
        {{s.value}}
    </div>

</div>

    <script>
        new Vue({
            el: "#comment",
            data: {
                flag: false,
                discuss: [
                { "name": "0",  "value": "6666666"          },
                { "name": "1",  "value": "我是无敌小旋风"   }, 
                { "name": "2",  "value": "哈哈哈哈哈哈"        }, 
                { "name": "3",  "value": "嗯，怎么不算呢"        }, 
                { "name": "4",  "value": "是不是别人不发火，就把人当傻子呀" }, 
                
            ]}
        }) 
    </script>
</body>

</html>
